<template>
  <div>
    <div class="box" v-for="item in cards" @mouseenter="enter">
      <div class="imgbox">
        <div class="img" :style="{backgroundImage: 'url('+item.coverUrl+')' }"></div>
      </div>
      <div class="contbox">
        <div class="autor">
          <div style="width: 60px;height: 100%;">
            <div class="head" :style="{backgroundImage: 'url('+item.user.headPicUrl+')' }"></div>
          </div>

          <div style="width: 120px;height: 100%;padding: 5px 0 0 10px;">
            <div class="userText">
              <a href="" class="username">{{item.user.username}}</a>
              <div class="createDate">发布于{{ item.createData.substring(0,10) }}</div>
            </div>
          </div>

<!--          <div style="width: 100px;height: 100%;">
            <div class="fans">
              +关注:{{ item.user.fans }}
            </div>
          </div>-->

        </div>
        <div class="cont">
          <div class="title">{{ item.title }}</div>
          <div class="deil">{{item.intro}}</div>
        </div>
        <div class="msg">
          <i class="el-icon-view interaction"> {{ item.view }}</i>
          <i class="el-icon-chat-dot-round interaction"> {{ item.commentNum }}</i>
        </div>
      </div>
      <div class="btn">
        <router-link :to="'Md/'+item.mid">go</router-link>
      </div>
    </div>
    <div class="beian">
      <a href="https://beian.miit.gov.cn/">
        蜀ICP备2021001114号-1
      </a>
    </div>
  </div>
</template>

<script>
import $ from 'jquery'
export default {
  name: "BlogCard",
  props: {
    cards:[]
  },
  methods: {
    enter(){
      $(".box").hover(function(){
        $(this).children(".imgbox").children(".img").stop().animate({
          width: "300px",
          height: "300px",
          left: "-10px",
          top: "-10px"
        })
      },function(){
        $(this).children(".imgbox").children(".img").stop().animate({
          width: "272px",
          height: "272px",
          left: "-0",
          top: "-0"
        },300)
      })
    },

  },
  created() {
    // this.$axios.get("/queryAllBlog").then(res => {
    //   this.cards = res.data
    // })
  }
}
</script>

<style scoped>
.beian{
  margin: auto auto;
  text-align: center;
}
.beian>a{
  text-decoration: none;
  color: #5C657E;
  font-size: 14px;
}
.box{
  margin: 30px auto;
  width: 700px;
  height: 270px;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 0 2px #67546A;
  display: flex;
  background-color: white;
}
.box>div{
  display: inline-block;
}
.imgbox{
  width: 272px;
  height: 272px;
  overflow: hidden;
  position: relative;
  left: -1px;
  top: -1px;
}
.box:hover{
  box-shadow: 0 0 10px #67546A;
}
.img{
  width: 100%;
  height: 100%;
  background-size: cover;
  background-repeat: no-repeat;
  position: absolute;
  background-position: center center;
}
.contbox{
  /* border: 1px solid #000; */
  width: 300px;
  height: 100%;
  padding: 20px;
}
.contbox>p{
  font-size: 14px;
  letter-spacing: .1em;
  text-indent: 2em;
}
.autor{
  box-shadow: 0 0 2px #67546A;
  height: 60px;
  margin-bottom: 10px;
  /*overflow: hidden;*/
  padding: 3px;
  border-radius: 10px;
  display: flex;
}
.head{
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  width: 60px;
  height: 60px;
  border-radius: 50%;
}
.btn{
  width: 88px;
  background-color: rgb(240, 240, 240);
  box-shadow: 0 0 1px #67546A;
}
.btn:hover{
  background-color: rgb(209, 209, 209);
}
.btn>a{
  line-height: 270px;
  width: 100%;
  text-align: center;
  display: inline-block;
  color: #67546A;
  text-decoration: none;
  font-size: 24px;
}
.userText{
  display: inline-block;
  width: 120px;
}
.username{
  font-size: 18px;
  color: #67546A;
}
.createDate{
  line-height: 30px;
  font-size: 12px;
  color: gray;
}
.fans{
  display: inline-block;
  width: 80px;
  height: 30px;
  line-height: 30px;
  padding:0 10px 0 10px;
  margin-top: 15px;
  border-radius: 3px;
  font-size: 14px;
  background-color: #00CDFE;
  color: white;
  cursor: pointer;
}
.cont{
  color: #67546A;
  /* border: 1px solid #000; */
  height: 130px;
}
.deil{
  /* border: 1px solid #000; */
  text-indent: 2em;
  font-size: 14px;
  line-height: 24px;
  display:-webkit-box;/*设置为弹性盒子*/
  overflow:hidden;/*超出隐藏*/
  text-overflow:ellipsis;/*显示省略号*/
  -webkit-line-clamp:3;/*多少行后显示省略号，这里设置为第一行超出后显示省略号*/
  word-break:break-all;/*强制英文单词自动换行,可要可不要*/
  -webkit-box-orient: vertical; /* 从上到下垂直排列子元素*/
  margin-top: 10px;
}
.title{
  font-size: 18px;
  line-height: 30px;
  font-weight: 600;
}
.msg{
  height: 30px;
}
.msg>i{
  color: #5C657E;
}
.interaction{
  font-size: 14px;
  color: #303133;
}
</style>
